<template>
	<el-dialog draggable overflow :title="titleMap[mode]" v-model="visible" :width="1010" destroy-on-close
		@closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px">
			<el-tabs type="border-card">
				<el-tab-pane ref="tab" label="基础信息">
					<el-row justify="space-evenly">
						<el-col :span="24">
							<el-descriptions title="" :column="5" border label-align="right">
								<el-descriptions-item>
									<template #label>供应商</template>
									{{ form.company.name }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>供应商余额</template>
									{{
										form.company.finance_balance +
										form.company.balance
									}}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>订单日期</template>
									{{ form.billdate }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>交期</template>
									{{ form.arrival_date }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>产品</template>
									{{ form.material.spec }}
									{{ form.material.name }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>形态</template>
									{{ form.type.name }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>批号</template>
									{{ form.lot.name }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>计划数量</template>
									{{ form.remain_quantity }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>计划单价</template>
									{{ form.price }}
								</el-descriptions-item>
								<el-descriptions-item>
									<template #label>金额</template>
									{{ form.price }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>剩余未交</template>
									{{ form.remain_quantity }}
								</el-descriptions-item>

								<el-descriptions-item>
									<template #label>备注</template>
									{{ form.remark }}
								</el-descriptions-item>
							</el-descriptions>
						</el-col>
					</el-row>
					<sc-VxeTable ref="xGrid1" :gridEvts="gridEvents" :gridOps="gridSubOpts"
						:tablecode="'purchase_storage_dye_save'" :url="$API.purchase.storage.list" :params="[
							{ instorage_way_id: 1 },
							{ purchase_order_id: form.id },
						]">
					</sc-VxeTable>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</el-dialog>
	<upload v-if="upload" ref="uploadDialog" @closed="upload = false" @success="handleSuccess"></upload>
	<SaveDialog v-if="dialog" ref="saveDialog" @closed="dialog = false" @success="handleSuccess"></SaveDialog>
</template>
<script>
import tool from "@/utils/tool";
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
import SaveDialog from "./savestorage";
import upload from "./../upload";
// import XEUtils from "xe-utils";
export default {
	emits: ["success", "closed"],
	components: { skAutoChoose, skDicSelect, SaveDialog, upload },
	data() {
		return {
			mode: "add",
			dialog: false,
			upload: false,
			form: {
				material: {},
				color: {},
				details: [],
				lot: {},
				attachments: [],
				material_quantity: 0,
				material_auxiliary_quantity: 0,
			},

			gridSubOpts: {
				height: 350,
			},
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			rules: {},
			visible: false,
			isSaveing: false,
			tableData: [],
			gridEvents: {
				add: () => {
					this.dialog = true;
					this.$nextTick(() => {
						this.$refs.saveDialog.setData(this.form);
						this.$refs.saveDialog.open();
					});
				},
				edit: ({ button }) => {
					this.edit(button.selectRecords[0]);
				},
				uploadAttachment: ({ button }) => {
					this.uploadAttachment(button.selectRecords[0])
				},
			},
		};
	},
	computed: {
		saveButtonName() {
			return (this.form.id ?? 0) > 0 ? "新增" : "编辑";
		},
	},
	mounted() { },
	methods: {
		uploadAttachment(data) {
			this.upload = true;
			this.$nextTick(() => {
				this.$refs.uploadDialog.setData(data);
				this.$refs.uploadDialog.open("edit");
			});
		},
		edit(data) {
			this.dialog = true;
			this.$nextTick(() => {
				this.$refs.saveDialog.setStorageData(data);
				this.$refs.saveDialog.open("edit");
			});
		},

		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.pro.purchase.storage.save.post(
						this.form
					);
					this.isSaveing = false;
					if (res.code == 200) {
						this.handleSuccess();
						this.$message.success("操作成功");
					}
				}
			});
		},
		handleSuccess() {
			this.$refs.xGrid1.refresh();
		},
		open(mode = "add") {
			this.mode = mode;
			this.visible = true;
			return this;
		},
		//表单注入数据
		setData(data) {
			Object.assign(this.form, tool.removeNull(data));
		},
	},
};
</script>

<style>
.attachments .el-upload--picture-card,
.attachments .el-upload-list--picture-card .el-upload-list__item {
	width: 100px;
	height: 100px;
	overflow: hidden;
}
</style>
